<template>
    <h3>动态组件</h3>
    <button @click="cName = MyLeft">显示Left组件</button>
    <button @click="cName = MyRight">显示Right组件</button>
    <!-- component是一个vue组件 -->
    <!-- <component :is="cName"></component> -->
    <!-- KeepAlive里面表示组件在切换过程中会被缓存 -->
    <!-- include="Left"表示只缓存Left组件 -->
    <!-- include里面必须写出.vue的文件名，而不是导入进来的对象名 -->
    <KeepAlive include="Left">
        <component :is="cName"></component>
    </KeepAlive>
</template>
<script setup>
import MyLeft from './components/Left.vue'
import MyRight from './components/Right.vue'
import { shallowRef } from 'vue'
// 用ref定义响应式组件，控制台会有警告
const cName = shallowRef(MyLeft) // 定义响应式组件

// setTimeout(() => {
//     // js中修改组件值需要改value属性
//     cName.value = Right 
// }, 5000)
</script>
<style scoped>
    
</style>